<template>
  <link rel="stylesheet" href="/assets/css/info.css" />

  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>填写退货单</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 退货地址 -->
      <div class="aui-flex">
        <div style="font-size: 16px">退货地址：</div>
        <div class="aui-flex-box">
          <h3>张三 <em>13060808099</em></h3>
          <p>广东省广州市海珠区财智大厦</p>
        </div>
      </div>
    </section>
  </section>

  <!-- 订单列表 -->
  <van-card
    v-for="(item, index) in product"
    :key="index"
    :title="item.products.name"
    :num="item.nums"
    :thumb="item.products.thumbs_text"
    @click-thumb="toProductInfo(item.proid)"
  >
    <!-- 卡片插槽部分 -->
    <template #title>
      <div class="title">{{ item.products.name }}</div>
    </template>

    <template #desc v-if="item.attrs && item.attrs.length > 0">
      <van-tag
        v-for="(value, key) in item.attrs"
        :key="key"
        class="tag"
        round
        plain
        type="primary"
        >{{ value.value }}</van-tag
      >
    </template>

    <template #desc v-else>
      <van-tag class="tag" round plain type="warning">无规格数据</van-tag>
      <!-- 单价 -->
    </template>

    <template #tags>
      <div>单价：￥{{ item.price }}</div>
    </template>

    <template #price>
      <div>合计：￥{{ item.total }}</div>
    </template>
  </van-card>

  <!-- 寄件信息 -->
  <van-form @submit="confirm">
    <!-- 无愧公司 -->
    <van-field
      v-model="back.express_name"
      is-link
      readonly
      label="物流公司"
      placeholder="点击选择物流公司"
      @click="ExpressShow = true"
    />

    <!-- 弹框组件 -->
    <van-popup v-model:show="ExpressShow" position="bottom">
      <van-picker
        title="选择物流"
        :columns="ExpressList"
        :columns-field-names="{ text: 'name', value: 'id' }"
        @confirm="ExpressConfirm"
        @cancel="ExpressShow = false"
      />
    </van-popup>

    <!-- 寄件地址 -->
    <van-field
      v-model="back.addr_name"
      is-link
      readonly
      label="寄件地址"
      placeholder="点击选择寄件地址"
      @click="AddressShow = true"
    />
    <!-- 弹框组件 -->
    <van-popup v-model:show="AddressShow" position="bottom">
      <van-picker
        title="选择寄件地址"
        :columns="AddressList"
        :columns-field-names="{ text: 'name', value: 'id' }"
        @confirm="AddressConfirm"
        @cancel="AddressShow = false"
      />
    </van-popup>

    <!-- 物流单号 -->
    <van-field
      v-model="back.expresscode"
      name="expresscode"
      label="物流单号"
      placeholder="物流单号"
      :rules="[{ required: true, message: '请输入物流单号' }]"
    />

    <van-field
      v-model="back.remark"
      name="remark"
      rows="2"
      autosize
      label="退货备注"
      type="textarea"
      maxlength="120"
      placeholder="请输入退货备注"
      show-word-limit
      :rules="[{ required: true, message: '请输入退货备注' }]"
    />

    <!-- 头像上传 -->
    <van-field name="thumbs" label="上传图集">
      <!-- 插槽重新输入框部分，用文件上传来代替 -->
      <template #input>
        <van-uploader multiple v-model="thumbs" :max-count="6" />
      </template>
    </van-field>

    <div style="width: 50%; margin: 2em auto">
      <van-button
        :loading="loading"
        round
        block
        color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
        native-type="submit"
        >提交</van-button
      >
    </div>
  </van-form>
</template>
<script setup>
import { getCurrentInstance, onBeforeMount } from "vue";

const { proxy } = getCurrentInstance();

let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
let product = ref([]);
let loading = ref(false);
let address = ref(null);
let order = ref({});
let back = ref({
  expressid: 0,
  express_name: "",
  addrid: 0,
  addr_name: "",
});
let thumbs = ref([]);

//物流公司
let ExpressShow = ref(false);
let AddressList = ref([]);

//寄件地址
let AddressShow = ref(false);
let ExpressList = ref([]);

onBeforeMount(() => {
  OrderData();
  ExpressData();
  AddressData();
});

const OrderData = async () => {
  if (!proxy.$business.value.id) {
    return false;
  }
  var params = {
    orderid: orderid,
    busid: proxy.$business.value.id,
  };

  var result = await proxy.$POST({
    url: "/order/info",
    params,
  });
  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  }
  //收货地址
  address.value = result.data.address;
  order.value = result.data.order;

  if (result.data.product) {
    result.data.product.map((item) => (item.attrs = JSON.parse(item.attrs)));
  }
  //商品数据
  product.value = result.data.product;

  return false;
};
//物流公司信息
const ExpressData = async () => {
  var result = await proxy.$POST({ url: "/express/index" });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  }
  ExpressList.value = result.data;
};

//寄件地址信息
const AddressData = async () => {
  var result = await proxy.$POST({
    url: "/address/index",
    params: {
      busid: proxy.$business.value.id,
    },
  });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  }

  var list = [];

  result.data.map((item) => {
    list.push({
      id: item.id,
      name: `${item.region_text} ${item.address} (${item.mobile})`,
    });
  });

  AddressList.value = list;
};

//确认物流公司
const ExpressConfirm = async ({ selectedOptions }) => {
  ExpressShow.value = false;

  back.value.expressid = selectedOptions[0].id;
  back.value.express_name = selectedOptions[0].name;
};

//确认寄件地址
const AddressConfirm = ({ selectedOptions }) => {
  AddressShow.value = false;

  back.value.addrid = selectedOptions[0].id;
  back.value.addr_name = selectedOptions[0].name;
};
//提交退货信息
const confirm = async (values) => {
  if (!back.value.expressid) {
    proxy.$fail("请选择物流公司");
    return false;
  }

  if (!back.value.addrid) {
    proxy.$fail("请选择寄件地址");
    return false;
  }

  var params = {
    busid: proxy.$business.value.id,
    orderid: orderid,
    expressid: back.value.expressid,
    expresscode: back.value.expresscode,
    addrid: back.value.addrid,
    remark: back.value.remark,
    thumbs: [],
  };

  if (values.thumbs.length > 0) {
    values.thumbs.map((item) => {
      params.thumbs.push(item.file);
    });
  }

  //调用接口
  if (params.thumbs.length > 0) {
    //有图片
    var result = await proxy.$UPLOAD({
      url: "/back/add",
      params,
    });
  } //没有图片
  else {
    var result = await proxy.$POST({
      url: "/back/add",
      params,
    });
  }
  
  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  } else {
    proxy.$success({
      message: result.msg,
      onClose: () => proxy.$router.go(-1),
    });
    return false;
  }
};
</script>
<style scoped>
.actions {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
}
</style>